<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>账号登录-资源基地</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <link th:href="@{'/static/images/favicon.ico'}" rel="shortcut icon" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="/static/css/register/basic.css">
    <link rel="stylesheet" type="text/css" href="/static/css/register/eyoucms.css">
    <style>
        .ey-container .ey-nav ul .active a {
            border-left: #fd8a27 3px solid;
            background-color: rgba(253, 138, 39, 0.1);
            color: #fd8a27;
        }

        .ey-container .ey-nav ul li a:hover {
            color: #fd8a27;
        }

        .ey-container .user-box .user-box-text {
            background-color: #fd8a27;
        }

        .ey-container .user-box-r .user-box-top .user-top-r .more {
            color: #fd8a27;
        }

        .ey-container .user-box-r .user-box-bottom .data-info .link a {
            color: #fd8a27;
        }

        .ey-container .column-title .column-name {
            color: #fd8a27;
        }

        a:hover {
            color: #fd8a27;
        }

        .el-button:focus, .el-button:hover {
            color: #fd8a27;
            border-color: rgba(253, 138, 39, 0.2);
            background-color: rgba(253, 138, 39, 0.1);
        }

        .el-button--primary {
            background-color: #fd8a27;
            border-color: #fd8a27;
        }

        .ey-container .item-from-row .err a {
            color: #fd8a27;
        }

        .ey-container .checkbox-label .checkbox:checked + .check-mark {
            background-color: #fd8a27;
            border: 1px solid #fd8a27;
        }

        .ey-container .checkbox-label .checkbox:checked + .check-mark:after {
            background: #fd8a27;
        }

        .ey-container .radio-label .radio:checked + .check-mark {
            border: 1px solid #fd8a27;
            background-color: #fd8a27;
        }

        .ey-container .radio-label .radio:checked + .check-mark:after {
            background: #fd8a27;
        }

        .el-button--primary.is-plain {
            color: #fd8a27;
            border-color: rgba(253, 138, 39, 0.2);
            background-color: rgba(253, 138, 39, 0.1);
        }

        .el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
            background: #fd8a27;
            border-color: #fd8a27;
        }

        .el-button--primary:hover, .el-button--primary:focus {
            background: rgba(253, 138, 39, 0.9);
            border-color: rgba(253, 138, 39, 0.9);
            color: #fff;
        }

        .el-input-number__decrease:hover, .el-input-number__increase:hover {
            color: #fd8a27;
        }

        .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled), .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
            border-color: #fd8a27;
        }

        .ey-container .address-con .address-item.cur {
            border: 1px solid rgba(253, 138, 39, 0.6);
        }

        .ey-container .address-con .address-item.cur:before {
            color: #fd8a27;
            border-top: 50px solid #fd8a27;
        }

        .ey-container .ey-con .shop-oper .shop-oper-l .el-button.active {
            color: #FFF;
            background-color: #fd8a27;
            border-color: #fd8a27;
        }

        .ey-container .goods-con .goods-item .goods-item-r .view a {
            color: #fd8a27;
        }

        .ey-container div.dataTables_paginate .paginate_button.active > a, .ey-containerdiv.dataTables_paginate .paginate_button.active > a:focus, .ey-containerdiv.dataTables_paginate .paginate_button.active > a:hover {
            background: #fd8a27 !important;
            border-color: #fd8a27 !important;
        }

        .ey-container .pagination > li > a:focus, .ey-container .pagination > li > a:hover, .ey-container .pagination > li > span:focus, .ey-container .pagination > li > span:hover {
            color: #fd8a27;
        }

        .ey-container .pagination > li > a, .ey-container .pagination > li > span {
            color: #fd8a27;
        }

        .el-button--danger {
            background-color: #fd8a27;
            border-color: #fd8a27;
        }

        .recharge .pc-vip-list.active {
            border: #fd8a27 2px solid;
            /*background-color:rgba(253,138,39,0.1);*/
        }

        .recharge .pc-vip-list:hover {
            border: #fd8a27 2px solid;
        }

        .recharge .pc-vip-list .icon-recomd {
            background: #fd8a27;
        }

        .el-input.is-active .el-input__inner, .el-input__inner:focus {
            border-color: #fd8a27;
        }

        .ey-container .address-con .selected .address-item:before {
            color: #fd8a27;
            border-top: 50px solid #fd8a27;
        }

        .ey-container .address-con .selected .address-item {
            border: 1px solid rgba(253, 138, 39, 0.4);
        }

        .ey-container .pay-type .payTag a {
            color: #fd8a27;
            border-bottom: 1px solid #fd8a27;
        }

        .ey-container .pay-type .pay-con .pay-type-item.active {
            border-color: rgba(253, 138, 39, 0.4);
        }

        .ey-container .pay-type .pay-con .pay-type-item.active:before {
            color: #fd8a27;
            border-bottom: 30px solid #fd8a27;
        }

        .ey-header-nav .nav li ul li a:hover {
            background: #fd8a27;
        }

        .btn-primary {
            background-color: #fd8a27;
        }

        .btn-primary.focus, .btn-primary:focus, .btn-primary:hover {
            border-color: #fd8a27;
            background-color: #fd8a27;
        }

        .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus,
        .btn-primary:active:focus, .btn-primary:active:hover, .open > .btn-primary.dropdown-toggle.focus, .open >
        .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover {
            border-color: #fd8a27;
            background-color: #fd8a27;
        }

        .login-link a {
            color: #fd8a27;
        }

        .register_index .login_link .login_link_register {
            color: #fd8a27;
        }
    </style>
    <script type="text/javascript" src="/static/js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="/static/layer/layer.js"></script>
    <link rel="stylesheet" href="/static/layer/theme/default/layer.css" id="layuicss-layer">
    <script type="text/javascript" src="/static/js/common.js"></script>
</head>

<body class="reg login" style="">
<div class="register_index ey-member">
    <div class="container">
        <form method="post" class="form-register panel-body fv-form">
            <input type="hidden" name="refreshCode" id="refreshCodeId" th:value="${codeUUId}">
            <input type="hidden" name="redirectUrl" id="redirtUrlId" th:value="${redirectUrl}">
            <div class="mip-reg-logo">
                <a href="/" class="ey-logo"> <img src="/static/images/logo.png"></a>
            </div>
            <div class="mip-reg-heading">账号登录</div>
            <div class="form-group group_z">
                <input type="text" name="username" value="" required="" class="form-control" placeholder="用户名">
            </div>
            <div class="form-group group_z">
                <input type="password" name="password" value="" required="" class="form-control" placeholder="登录密码">
            </div>
            <div class="form-group group_z">
                <input type="text" name="captchaCode" value="" required="" class="form-control" placeholder="图片验证码"
                       style="width: 56%;display: inline-block;float: left;">
                <img th:src="@{'/res-login/captcha.jpg?uuid='+${codeUUId}}"
                     style="display: inline-block;width: 44%;height: 43px;float: left;" id="refreshImg">
            </div>
            <div class="login-link">
                <text style="float: left;font-size: 3px;color: #c5ccd1;"><span>提示：</span>点击图片刷新</text>
                <a class="login-link-reg" href="/to/register.html">注册</a>
                <a href="/to/password.html">找回密码</a>
            </div>
            <input type="button" name="submit" class="btn btn-lg btn-primary btn-block group_z" value="登录"
                   onclick="goLogin()">
        </form>
    </div>
</div>
<script type="text/javascript">
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            $('input[name=submit]').trigger("click");
        }
    });

    function goLogin() {
        var username = $('input[name=username]').val();
        var password = $('input[name=password]').val();
        var captchaCode = $('input[name=captchaCode]').val();
        var refreshCode = $('input[name=refreshCode]').val();

        if (username == '') {
            layer.msg('用户名不能为空！', {time: 1500, icon: 5});
            username.focus();
            return false;
        }

        if (refreshCode == '') {
            layer.msg('标识不能为空！', {time: 1500, icon: 5});
            window.location.reload();
            return false;
        }

        if (password == '') {
            layer.msg('密码不能为空！', {time: 1500, icon: 5});
            password.focus();
            return false;
        }

        if (captchaCode == '') {
            layer.msg('图片验证码不能为空！', {time: 1500, icon: 5});
            captchaCode.focus();
            return false;
        }
        layer_loading('正在处理');
        $.ajax({
            url: "/res-login/resLogin.html",
            data: {
                "userName": username,
                "password": password,
                "uuid": refreshCode,
                "captchaCode": captchaCode
            },
            type: 'post',
            success: function (res) {
                layer.closeAll();
                //验证码不对
                if (-1 == res.rt) {
                    layer.msg('验证码不对', {icon: 4, time: 2000}, function () {
                        //do something
                        $('input[name=captchaCode]').val("");
                        $("#refreshImg").attr("src", '/res-login/captcha.jpg?uuid=' + $("#refreshCodeId").val());
                    });
                    return;
                }
                //用户不存在
                if (-2 == res.rt) {
                    layer.msg('用户不存在', {icon: 4, time: 2000}, function () {
                        $('input[name=username]').val("");
                        $('input[name=password]').val("");
                        $('input[name=captchaCode]').val("");
                        $("#refreshImg").attr("src", '/res-login/captcha.jpg?uuid=' + $("#refreshCodeId").val());
                    });
                    return;
                }
                //密码不正确
                if (-3 == res.rt) {
                    layer.msg('密码不正确', {icon: 4, time: 2000}, function () {
                        $('input[name=username]').val("");
                        $('input[name=password]').val("");
                        $('input[name=captchaCode]').val("");
                        $("#refreshImg").attr("src", '/res-login/captcha.jpg?uuid=' + $("#refreshCodeId").val());
                    });
                    return;
                }
                layer.msg("登录成功", {icon: 1, time: 2000}, function () {
                    if($("#redirtUrlId").val() == null || $("#redirtUrlId").val()==''){
                        window.location.href = "/";
                    }else {
                        window.location.href = $("#redirtUrlId").val();
                    }
                });
            },
            error: function (e) {
                layer.closeAll();
                showErrorAlert("网络异常,请稍后再试!");
            }
        });

    }

    $(function () {
        $("#refreshImg").on('click', function () {
            layer_loading('刷新验证码');
            setTimeout(function () {
                $("#refreshImg").attr("src", '/res-login/captcha.jpg?uuid=' + $("#refreshCodeId").val());
                layer.closeAll();
            }, 3000);
        });
    });
</script>

</body>
</html>
